<template>
  <div class="app-container">
    <div style="background:#fff">
      <el-tabs v-model="getData.params.projectId" type="card" size="mini" @tab-click="chgProject">
        <el-tab-pane v-for="item in projectList" :key="item.id" :label="item.name" :name="item.id + ''" />
      </el-tabs>
    </div>
    <!--查询-->
    <div class="my-bar">
      <el-button-group class="float-left">
        <el-button size="small" type="primary" icon="el-icon-edit" @click="$router.push('/gen/tableSave?projectId=' + getData.params.projectId + '&moduleId=' + getData.params.moduleId)">新增</el-button>
        <el-dropdown>
          <el-button :loading="listData.loading" size="small" type="primary">更多 <i class="el-icon-arrow-down" /></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item divided @click.native="onMutiCommand('字段代码')">字段代码</el-dropdown-item>
            <el-dropdown-item divided @click.native="onMutiCommand('生成代码')">生成代码</el-dropdown-item>
            <el-dropdown-item divided @click.native="onMutiCommand('创建SQL')">创建SQL</el-dropdown-item>
            <!-- <el-dropdown-item divided @click.native="onMutiCommand('更新SQL')">更新SQL</el-dropdown-item> -->
            <el-dropdown-item divided @click.native="onMutiCommand('导出excel')">导出excel</el-dropdown-item>
            <el-dropdown-item divided @click.native="onMutiCommand('互换位置')">互换位置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-button-group>
      <el-button size="small" type="success" icon="el-icon-upload" @click="onImportSql">SQL导入</el-button>
      <el-form :inline="true" class="float-right" size="small">
        <!-- <el-form-item v-if="isAdmin">
          <el-input v-model="getData.params.id" placeholder="请输入ID" clearable />
        </el-form-item> -->
        <el-form-item>
          <el-radio-group v-model="getData.params.moduleId" @change="chgModule">
            <el-radio-button v-for="item in moduleList" :key="item.id" :label="item.id + ''">{{ item.name }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item>
          <el-input v-model="getData.params.nameLk" placeholder="请输入表名" clearable />
        </el-form-item> -->
        <!-- <el-form-item>
          <el-button type="primary" @click="onSearch()"><i class="el-icon-search" /></el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <!--展示表格-->
    <el-table v-loading="listData.loading" :data="listData.data.filter(data => !tblQry || data.name.includes(tblQry))" element-loading-text="载入中..." border fit highlight-current-row @selection-change="selectionChange">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column :show-overflow-tooltip="true" align="center" prop="id" label="id" width="60" />
      <el-table-column align="center" prop="project.name" label="项目" width="70px" />
      <el-table-column align="center" prop="module.name" label="模块" width="130px" />
      <!--自动生成表格代码开始-->
      <!-- <el-table-column align="center" prop="name" label="表名" /> -->
      <el-table-column align="center" prop="name" label="表名">
        <template slot="header">
          <el-input v-model="tblQry" size="mini" placeholder="表名检索" clearable />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cmmt" label="表注释" />
      <el-table-column align="center" prop="genFiles" label="生成文件" />
      <el-table-column align="center" prop="rowCol" label="几栏" width="55px" />
      <!-- <el-table-column align="center" prop="isLog" label="操作日志" width="80px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isLog" size="mini">记录</el-tag>
          <el-tag v-else size="mini">不记录</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="isPerm" label="权限" width="55px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isPerm" size="mini" style="color: red;">是</el-tag>
          <el-tag v-else size="mini">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="isTree" label="树形" width="55px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isTree" size="mini" style="color: red;">是</el-tag>
          <el-tag v-else size="mini">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="isImport" label="导入" width="55px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isImport" size="mini" style="color: red;">是</el-tag>
          <el-tag v-else size="mini">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="isExport" label="导出" width="55px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isExport" size="mini">是</el-tag>
          <el-tag v-else size="mini" style="color: red;">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="hasAction" label="有操作" width="65px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.hasAction" size="mini">是</el-tag>
          <el-tag v-else size="mini" style="color: red;">否</el-tag>
        </template>
      </el-table-column>
      <!--自动生成表格代码结束-->
      <el-table-column prop="operation" fixed="right" width="172px" label="操作" align="center">
        <template slot-scope="scope">
          <el-button :disabled="loadings[scope.$index]" size="mini" type="primary" @click="$router.push('/gen/tableSave?id=' + scope.row.id + '&projectId=' + getData.params.projectId + '&moduleId=' + getData.params.moduleId)">编辑</el-button>
          <el-dropdown>
            <el-button :loading="loadings[scope.$index]" size="mini" type="primary">更多 <i class="el-icon-arrow-down" /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="onCommand(scope, '代码预览')">代码预览</el-dropdown-item>
              <el-dropdown-item divided @click.native="onCommand(scope, '字段代码')">字段代码</el-dropdown-item>
              <el-dropdown-item divided @click.native="onCommand(scope, '生成代码')">生成代码</el-dropdown-item>
              <el-dropdown-item divided @click.native="onCommand(scope, '创建SQL')">创建SQL</el-dropdown-item>
              <el-dropdown-item divided @click.native="onCommand(scope, '更新SQL')">更新SQL</el-dropdown-item>
              <el-dropdown-item divided @click.native="onCommand(scope, '拷贝')">拷贝</el-dropdown-item>
              <el-dropdown-item divided @click.native="onCommand(scope, '删除')">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="my-bar">
      <el-pagination :page-size="getData.pageSize" :total="listData.total" class="float-right" layout="total, prev, pager, next" @current-change="onPageNum" />
    </div>
    <el-dialog :visible.sync="showData.show" :title="showData.title" width="70%">
      <el-form size="small">
        <el-form-item>
          <el-input v-model="showData.data" :rows="20" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="showData.show = false; showData.data = ''">关闭</el-button>
          <!-- <el-button :loading="showData.loading" size="small" type="primary" @click="onUpdateSql()">确认执行更新SQL</el-button> -->
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="importData.show" title="导入表结构" width="70%">
      <el-form size="small">
        <el-form-item>
          <el-input v-model="importData.sql" :autosize="{ minRows: 6 }" placeholder="请输入SQL" type="textarea" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="importData.show = false;">关闭</el-button>
          <el-button size="small" type="primary" @click="toImportSql">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="mvData.show" title="选择项目">
      <el-form size="small">
        <el-form-item>
          <el-select v-model="mvData.projectId" placeholder="请选择项目">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="mvData.show = false; mvData.data = {}">关闭</el-button>
          <el-button :loading="mvData.loading" size="small" type="primary" @click="$router.push('/gen/tableSave?mv=1&id=' + mvData.data.id + '&projectId=' + mvData.projectId + '&moduleId=' + getData.params.moduleId)">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import api, { isAdmin, onDownload } from '@/api/service'

export default {
  data() {
    return {
      func: api,
      bean: 'tpl.table',
      isAdmin: isAdmin(),
      popData: {},
      getData: {
        pageNum: 1,
        pageSize: 100,
        showFields: 'id,name,cmmt,projectId,moduleId,rowCol,genFiles,isImport,isExport,hasAction,isTree,isPerm',
        showFlags: 'project[id,name],module[id,name]', // ,columnList,indexList,linkList,linkList.table
        params: {
          projectId: '',
          moduleId: null,
          // flag: 'A'
        }
      },
      listData: {
        data: [],
        total: 0,
        loading: false
      },
      importData: {
        sql: '',
        show: false,
        loading: false
      },
      showData: {
        title: '',
        show: false,
        loading: false
      },
      mvData: {
        show: false,
        loading: false,
        data: {},
        projectId: ''
      },
      tblQry: '',
      cmmtQry: '',
      loadings: [],
      moduleList: [{}],
      projectList: [{}],
      selections: [],
      moduleId: null
    }
  },
  mounted() {
    const query = this.$route.query
    this.getData.params.projectId = query.projectId ? query.projectId : ''
    this.moduleId = query.moduleId ? query.moduleId : ''
    this.getProjectList()
  },
  methods: {
    chgProject() {
      const index = this.projectList.findIndex(v => v.id + '' === this.getData.params.projectId)
      if (index > -1) {
        this.moduleList = this.projectList[index].moduleList
      }
      this.getData.params.moduleId = this.moduleList[this.moduleList.length - 1].id
      if (this.moduleId) {
        if (this.moduleList.findIndex(v => v.id + '' === this.moduleId) > -1) {
          this.getData.params.moduleId = this.moduleId
        }
      }
      this.getListData()
    },
    getListData() {
      this.listData.loading = true
      const params = JSON.parse(JSON.stringify(this.getData))
      // if (params.params.flag === 'A') {
      //   delete params.params.flag
      // }
      api.getListPage(this.bean, params).then(res => {
        this.listData.data = res.data
        this.listData.total = res.total
        this.listData.loading = false
        this.loadings = []
      })
    },
    getProjectList() {
      this.listData.loading = true
      api.getListPage('tpl.project', {
        pageSize: 100, showFields: 'id,name', showFlags: 'moduleList[id,name]', params: {}
      }).then(res => {
        this.listData.loading = false
        this.projectList = res.data
        if (!this.getData.params.projectId) {
          this.getData.params.projectId = res.data[0].id + ''
        }
        this.chgProject()
      })
    },
    onPageNum(val) {
      this.getData.pageNum = val
      this.getListData()
    },
    onSearch() {
      if (!this.getData.params.name) {
        delete this.getData.params.name
      }
      this.getListData()
    },
    onImportSql() {
      localStorage.setItem('importSql', this.importData.sql)
      this.importData.show = true
    },
    toImportSql() {
      localStorage.setItem('importSql', this.importData.sql)
      this.importData.show = false
      this.$router.push('/gen/tableSave?mv=2&projectId=' + this.getData.params.projectId + '&moduleId=' + this.getData.params.moduleId)
    },
    onUpdateSql() {
      this.showData.loading = true
      api.newRequest('table', 'flushSql', this.showData).then(res => {
        this.showData.loading = false
        this.showData.show = false
        this.$message.success('已经记录完毕!')
      })
    },
    onCommand(scope, command) {
      console.log(command)
      if (command === '删除') {
        api.cmStatus(this, scope, 0, command)
      } else if (command === '拷贝') {
        // 等待再做
        this.mvData.show = true
        this.mvData.data = scope.row
      } else if (command === '创建SQL') {
        this.$set(this.loadings, scope.$index, true)
        api.newRequest('table', 'createSql', [scope.row.id]).then(res => {
          this.$set(this.loadings, scope.$index, false)
          this.showData.show = true
          this.showData.data = res.data
          this.showData.title = command
          this.showData.id = scope.row.id
        }).catch(() => {
          this.$set(this.loadings, scope.$index, false)
        })
      } else if (command === '字段代码') {
        this.$set(this.loadings, scope.$index, true)
        api.newRequest('table', 'vbenSchemas', [scope.row.id]).then(res => {
          this.$set(this.loadings, scope.$index, false)
          this.showData.show = true
          this.showData.data = res.data
          this.showData.title = command
          this.showData.id = scope.row.id
        }).catch(() => {
          this.$set(this.loadings, scope.$index, false)
        })
      } else if (command === '更新SQL') {
        this.$set(this.loadings, scope.$index, true)
        api.newRequest('table', 'modifySql', [scope.row.id]).then(res => {
          this.$set(this.loadings, scope.$index, false)
          this.showData.show = true
          this.showData.data = res.data
          this.showData.title = command
          this.showData.id = scope.row.id
        }).catch(() => {
          this.$set(this.loadings, scope.$index, false)
        })
      } else if (command === '生成代码') {
        this.$set(this.loadings, scope.$index, true)
        api.newRequest('table', 'autoGen', [scope.row.id]).then(res => {
          this.$set(this.loadings, scope.$index, false)
          this.$message.success('已经生成完毕!')
        }).catch(() => {
          this.$set(this.loadings, scope.$index, false)
        })
      } else if (command === '代码预览') {
        this.$router.push('/gen/preview?id=' + scope.row.id)
      }
    },
    selectionChange(val) {
      this.selections = val
    },
    onMutiCommand(command) {
      if (this.selections.length === 0) {
        this.$message.error('请选择好表!')
        return
      }
      const ids = []
      for (const sel of this.selections) {
        ids.push(sel.id)
      }
      if (command === '创建SQL') {
        this.listData.loading = true
        api.newRequest('table', 'createSql', ids).then(res => {
          this.listData.loading = false
          this.showData.show = true
          this.showData.data = res.data
          this.showData.title = command
          this.showData.id = ids[0]
        }).catch(() => {
          this.listData.loading = false
        })
      } else if (command === '字段代码') {
        this.listData.loading = true
        api.newRequest('table', 'vbenSchemas', ids).then(res => {
          this.listData.loading = false
          this.showData.show = true
          this.showData.data = res.data
          this.showData.title = command
          this.showData.id = ids[0]
        }).catch(() => {
          this.listData.loading = false
        })
      } else if (command === '生成代码') {
        this.listData.loading = true
        api.newRequest('table', 'autoGen', ids).then(res => {
          this.listData.loading = false
          this.$message.success('已经生成完毕!')
        }).catch(() => {
          this.listData.loading = false
        })
      } else if (command === '导出excel') {
        onDownload('table', 'tableToExcel', ids, '表结构').then(res => {
          console.log('res', res)
        }).catch(err => {
          this.$message.error(JSON.stringify(err))
        })
      } else if (command === '互换位置') {
        api.newRequest('table', 'changeId', ids).then(res => {
          this.listData.loading = false
          this.$message.success('已经互换位置!')
          this.getListData()
        }).catch(() => {
          this.listData.loading = false
        })
      }
    },
    chgModule(val) {
      this.getData.params.moduleId = val
      this.getListData()
    }
  }
}
</script>
